<template>
    <div class="login">
        <div class="login-logo">
            <img class="login-logoImg mt30 mb20 auto radius" src="../../assets/logo2.png">
        </div>
        <div class="login-input w92 auto" v-if="active == 1">
			<div class="input-com pt20 pb20 border-b flex flex-start">
				<!-- <span class="input_com bold fs14">账号</span>: -->
				<input type="text" placeholder="请输入手机号/账号" v-model="form.phone" class="fs14 c666">
			</div>
			<div class="input-com pt15 pb15 border-b layout">
				<div class="flex_1 flex">
					<input v-model="form.code" class="coptcha-input c999"  placeholder="请输入验证码" maxlength="6" type="number">
				</div>
				<button class="radius red pl10 pr10 pt5 pb5 fs12" @click="getCaptchFun" style="border: 1px solid #ff0036;">
					<template v-if="sending">{{ minute }} s</template>
					<template v-else>获取验证码</template>
				</button>
			</div>
			<p class="pt20 pb20 bold" @click="getActive(2)">用账号密码登录 > </p>
			<button class="btn-button mt10 pt10 pb10 auto full-width radius" :class="{ on : boolean }" @click="submit">确定</button>
			<div class="mt20 mb40 pl20 pr20 align-center">
				<router-link to="/login/register" tag="span" class="c333">注册新账号</router-link>
				<i class="bg-666 ml10 mr10 inline-block" style="width:2px;height:10px;"></i>
				<router-link to="/login/security" tag="span" class="c333">遇到问题?</router-link>
			</div>
        </div>
        <div class="login-input w92 auto" v-if="active == 2">
			<div class="input-com pt20 pb20 border-b flex flex-start">
				<!-- <span class="input_com bold fs14">账号</span>: -->
				<input type="text" placeholder="请输入手机号/账号" v-model="form.phone" class="fs14 c666">
			</div>
			<div class="input-com pt20 pb20 border-b flex flex-start">
				<!-- <span class="input_com bold fs14">密码</span>: -->
				<input placeholder="请输入密码" type="password" v-model="form.password" class="fs14 c666">
			</div>
			<p class="pt20 pb20 bold" @click="getActive(1)">用验证码快速登录 > </p>
			<button class="btn-button mt10 mb20 pt10 pb10 auto full-width radius" :class="{ on : boolean }" @click="submit">登录</button>
			<div class="pl20 pr20 align-center">
				<router-link to="/login/register" tag="span" class="c333">注册新账号</router-link>
				<i class="bg-666 ml10 mr10 inline-block" style="width:2px;height:10px;"></i>
				<router-link to="/login/forget" tag="span" class="c333">遇到问题?</router-link>
			</div>
        </div>
        <div class="fls16 ml30 mr30 pb30 pt30" style="margin-top:30%">
            <p class="thirdly align-center mb10 c999">第三方登陆</p>
            <div class="mt15">
                <div @click="weChat" class="align-center">
                	<van-icon name="weixin" style="color: #50b674;font-size:30px;"></van-icon>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getCode } from "@/api";
	export default{
    	data()
    	{
    		return {
				verify  : false,
				active  : 2,
				minute  : 60,
				sending : false,
				form    : {
					phone    : '',
					password : '',
					code     : ''
    			}
    		}
    	},
    	computed:
		{
			boolean()
			{
				var boolean = false;

				this.verify = false;
				
 				if( this.form.phone && this.form.code || this.form.password )
				{
					this.verify = true;
					boolean = true;
				}
				else
				{
					this.verify = false;
					boolean = false;
				}

				return boolean;
			}
		},
    	methods: {
    		submit()
    		{
    			if(!this.verify)  return;

    			if(this.active == 1)
    			{
    				this.$http.post('/login/phoneCodeSignin', this.form ).then(res => {
	    				this.$store.dispatch("login", res.data);
						this.$router.replace(this.$route.query.redirect ? this.$route.query.redirect: '/'); 
	    			})
    			}
				if(this.active == 2)
				{
					this.$http.post('/login/phoneSignin', this.form ).then(res => {
	    				this.$store.dispatch("login", res.data);
						this.$router.replace(this.$route.query.redirect ? this.$route.query.redirect: '/'); 
	    			})
				}
    		},
    		getCaptchFun () 
    		{ 
				if(this.sending) return;

				getCode(this.form.phone).then( res => {
					this.countDown();
				})
			},
			getActive(active)
			{

				this.active = active;
				this.form.password = '';
				this.form.code = '';
			},
			countDown(){
				this.sending = true;

				var clear = setInterval( () => {
					if( this.minute > 0 ){
						--this.minute;
					}else{
						clearInterval(clear);
						this.sending = false;
						this.minute = 60;
					}
				}, 1000);
			},
			weChat()
    		{

    		},
    	}
    }
</script>

<style lang="less">
	.login{
		.input-com{
			height: 60px;
		}
		.login-logoImg {
			height: 100px;
			width: 100px;
			object-fit: cover;
		}
		.on{
			background-color:#ff0036;
			color: white;
		}
		.thirdly{
			position: relative;
		}
		.thirdly:before{
			content: "";
			width: 40px;
			height: 1px;
			background-color: #f5f5f5;
			position: absolute;
			top: 50%;
			left: 20%;
		}
		.thirdly:after{
			content: "";
			width: 40px;
			height: 1px;
			background-color: #f5f5f5;
			position: absolute;
			top: 50%;
			right: 20%;
		}
	}
</style>
